<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：data和el的2种写法
        1.el有2种写法
            (1)new Vue的时候配置el属性
            (2)先创建Vue实例，通过vm.$mount("#root")指定el的值
        2.data有2种写法
            (1)对象式
            (2)函数式，后续学习到组件时，必须使用函数式，否则报错
        3.原则
            由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了

    -->
    <div id="demo">
        <h1>你好啊,{{name}}</h1>        
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        //el的两种写法              
        // const x = new Vue({
        //     // el:"#demo",//第一种
        //     data:{
        //         name:"test",
        //     }
        // })
        // //第二种,x.$mount("#demo")，比如可以用在延时加载的情况
        // setTimeout(() => {
        //     x.$mount("#demo")
        // }, 1000);
        
        //data的两种写法
        new Vue({
            el:"#demo",
            //1.对象式
            // data:{
            //     name:"test"
            // }
            //2.函数式
            data(){
                console.log(this)//此处的this是vue实例对象
                return{
                    name:"fwx1",
                    address:"ps"
                }
            },
            //如果写成箭头函数则是window对象
            // data:()=>{
            //     console.log(this)//此处的this是window对象
            //     return{
            //         name:"fwx1",
            //         address:"ps"
            //     }
            // }
        })
    </script>
</body>
</html>